<template>
    <div class="body">
        <div class="item" v-for="(item,index) in data" :key="index">
            <div class="avatar" @click="goUser(item.userId)"><img :src="item.img" /></div>
            <div class="info">
                <div class="author" @click="goUser(item.userId)">{{ item.userName }}</div>
                <div class="reply" v-if="item.reply" >
                    <span>回复</span> <span class="a" @click="goUser(item.replyId)">{{ item.reply }}</span>
                </div>
                <div class="content" v-html="item.html"></div>
                <div class="time">
                    <span>{{ item.date }}</span>
                    <span @click="reply" class="reply-btn">回复</span>
                </div>
                <div class="reply-form">

                </div>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        name:'comment',
        data() {
            return {

            };
        },
        props: {
            data: {
                type: Array,
                default: ()=> {
                    return []
                }
            }
        },
        methods: {
            goUser(id) {
                this.$router.push({path: 'user',query: {id:id}})
            },
            reply() {

            },
        }
    }
</script>
<style scoped lang="scss">
    .body {
        width: 100% !important;
        display: block!important;
    }
    .a {
        color: $color;
    }
    #vditor {
        width: 100%;
        height: 200px;
    }
    .item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px dotted #E2E2E2;
        padding: 15rem;
        .avatar {
            width: 34rem;
            height: 34rem;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
            }
            
        }
        .info {
            width: calc(100% - 50rem);
            .author {
                font-size: 14rem;
                color: #333;
                margin-bottom: 10rem;
                cursor: pointer;
            }
            .reply {
                font-size: 16rem;
                color: #666;
                .a {
                    font-size: 14rem;
                    cursor: pointer;
                }
            }
            .content {
                font-size: 16rem;
                color: #666;
            }
            .time {
                font-size: 12rem;
                color: #999;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .reply-btn {
                    color: $color;
                    cursor: pointer;
                }
            }
        }
    }
</style>
